<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="jquery.js"></script>
    <script src="lodash.js"></script>
    <script src="angular.js"></script>
    <style>
        .form-group{
            margin: 10px 0;
        }
        .form-group:after{
             height: 0;
            content:"";
            clear:all;
        }
        label {
            float: left;
            width: 130px;
            text-align: right;
            padding-right: 10px;
        }
    </style>
</head>
<body>
   <div ng-controller="MC">
    <div ng-repeat="n in nodes">   
        <label ng-bind="n"></label>
        <input type="radio" ng-model="$parent.node" ng-value="n" name="nn">
    </div>
    <br>
    <form>
        <div class="form-group" ng-repeat="d in data">
            <label>{{d.label}}({{d.type}})</label>
            
            <div ng-switch on="d.type">
              <span ng-switch-when="radio">
                <span ng-repeat="(k, v) in d.options">
                    <span>{{v}}</span>
                    <input ng-model="d.value" ng-value="{{k}}" ng-model-options="{updateOn: 'blur'}"
                        ng-checked="k === d.value" type="{{d.type}}">
                </span>
                {{d.value}}
              </span>  
              <span ng-switch-when="select">  
                <select  
                    ng-model="d.value"
                        ng-value="d.value" ng-model-options="{updateOn: 'blur'}"                                
                    ng-options="k as v for (k, v) in d.options"></select>
                {{d.value}}  
              </span>  
              <span ng-switch-default>  
                   <input value="{{d.value}}" ng-model="d.value" ng-model-options="{updateOn: 'blur'}"
                       type="{{d.type}}">   {{d.value}}=>{{d.value.length}}
                   </span>   
              </span>  
           
           
            </div>
        </div>
    </form>
    </div>
    <br>
    <div ng-controller="MC2">
        <filter-text first-char="{'+': 'R', '-': 'L'}"></filter-text>
        <input type="text" id="mytext" style="ime: disabled">
    </div>
    <br>
    <br>   
    
    <script>
        var obj = {
            "node1" : 
                [{
                    label: "Start Loc.",
                    type: "text",
                    value: "5",
                    update: function() {}
                },
                {
                    label: "End Loc.",
                    type: "text",
                    value: "",
                    update: function() {}
                },
                {
                    label: "DFOV",
                    type: "text",
                    value: "",
                    update: function() {}
                },
                {
                    label: "sex",
                    type: "radio",
                    options: {
                        "0": "Male",
                        "1": "Female"
                     },
                    value: "0",
                    update: function() {}
                }],
            "node2" : 
                [{
                    label: "R/L",
                    type: "select",
                    value: "3",
                    options: {
                        "0" :"a",
                        "1": "b",
                        "2": "c",
                        "3": "d"
                    },
                    update: function() {}
                },
                {
                    label: "A/P",
                    type: "select",
                    options: {
                        "0": "100",
                        "1": "400"
                    },
                    value: "0",
                    update: function() {}
                },
                {
                     label: "yesOrNo",
                     type: "radio",
                     options: {
                        "0": "yes",
                        "1": "no"
                     },
                     value: "1",
                     update: function() {}
                }
                ]  
        }
        
        
        var module = angular.module("app", []);
        
        module.controller("MC", function($scope) {
            $scope.nodes = ["node1", "node2"];
            $scope.data = obj[$scope.node];           
            
            $scope.$watch("node", function() {
                $scope.data = obj[$scope.node];  
            });
            
            $scope.changed = function(v) {
                console.log(v);
            }
        })
        .controller("MC2", function($scope) {
            
        })
        ;
        
        
        
        angular.bootstrap(document, ["app"]);
        
        
        var validCharAscii = [
            8,  // => backspace
            46, // => dot
            48, 49, 50, 51, 52, 53, 54, 55, 56, 57 // => 0 -> 9
        ];
            
        
        $("#mytext").on("keypress", function(e) {
            console.log(e.which);
            if (validCharAscii.indexOf(e.which) < 0) {
                e.preventDefault();
            }
        });
    </script>
</body>
</html>